<template>
  <div class="beike">
    <div class="title">
      <img src="../../assets/images/title.png" alt="">
    </div>
    <div class="input">
      <div style="display: flex;">
        <img style="width: 45px;" src="../../assets/images/jiqiren.png" alt="">
        <textarea v-model="message"
          placeholder="你可以输入主题、科目、教材所属版社、课程内容及其课程内容补充发给我，帮助生成教学大纲，例如二年级语文，人民教育出版社，第一课，小猴教我跳"></textarea>
      </div>
      <div class="button">
        <el-button @click="isActive = !isActive" round :class="isActive ? 'active' : ''">
          <div>
            <img v-if="!isActive" style="width: 16px;" src="../../assets/images/shengdusikao.png" alt="">
            <img v-else style="width: 16px; height: 16px;" src="../../assets//images/sikao@2x.png" alt="">
            <span :style="{ color: isActive ? '#1890ff' : '#333' }">深度思考</span>
          </div>
        </el-button>
        <el-button type="primary" @click="handleClick">
          <div>
            <img style="width: 13px; margin-right: 5px;" src="../../assets/images/fasong.png" alt="">
            <span>发送</span>
          </div>
        </el-button>
      </div>
      <!-- 机器人 -->
      <img class="robot" src="../../assets/images/jiqiren@2x.png" alt="">
    </div>
    <div class="item">
      <ul>
        <li @click="toggleMenu(1)">
          <img src="../../assets/images/yuwen.png" alt="">
          <span>语文智能体</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/shuxue.png" alt="">
          <span>数学智能体</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/yingyu.png" alt="">
          <span>英语智能体</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/zhengzhi.png" alt="">
          <span>政治智能体</span>
        </li>
       <li  @click="toggleMenu(1)">
          <img src="../../assets/images/lishi.png" alt="">
          <span>历史智能体</span>
        </li>
         <li  @click="toggleMenu(1)">
          <img src="../../assets/images/dili.png" alt="">
          <span>地理智能体</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/wuli.png" alt="">
          <span>物理智能体</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/huaxue.png" alt="">
          <span>化学智能体</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/shengwu.png" alt="">
          <span>生物智能体</span>
        </li>
       <li  @click="toggleMenu(1)">
          <img src="../../assets/images/kepu.png" alt="">
          <span>科普智能体</span>
        </li>
       <li  @click="toggleMenu(1)">
          <img src="../../assets/images/shuzimeiti.png" alt="">
          <span>数据科学与大数据技术</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/shijuechuanda.png" alt="">
          <span>智能科学与技术</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/shijuechuanda.png" alt="">
          <span>计算机科学与技术</span>
        </li>
        <li  @click="toggleMenu(1)">
          <img src="../../assets/images/shijuechuanda.png" alt="">
          <span>软件工程智能体</span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
const isActive = ref(false)
const router = useRouter()

const message = ref('')
const isshengdu = computed(() => {
  return isActive.value ? 1 : 0
})


// 发送
const handleClick = () => {
  console.log("发送");
  router.push({
    path: '/conversation',
    query: {
      msg: message.value,
      isshengdu: isshengdu.value
    }
  })
}
  const toggleMenu = (index) => {
  router.push({
    path: '/AilessonsView',
    query: {
      type:index
    }
  })

}
</script>
<style scoped>
.beike {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px 50px 20px;
}

.input {
  width: 1024px;
  height: 145px;
  padding: 20px;
  border-radius: 10px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  position: relative;
}

.item {
  width: 1024px;
  height: 300px;
  padding: 20px;
  /* background-color: aqua; */
  border-radius: 10px;
  margin-top: 20px;
}

.item ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
}

.item li {
  width: calc(20% - 8px);
  height: 40px;
  border-radius: 24px;
  background: #fff;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  box-sizing: border-box;
  margin-bottom: 15px;
  padding: 0 18px;
}

.item li img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}

/* —————————————————输入框样式————————————————————————— */
.input textarea {
  width: 100%;
  border: none;
  resize: none;
  font-size: 14px;
  outline: none;
  color: #666;
}

.input .button {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.robot {
  position: absolute;
  bottom: 143px;
  right: 70px;
}

.active {
  border: 1px solid blue;
}
</style>
